<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI简历分析系统 - MVP</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary: #4361ee;
      --primary-dark: #3a0ca3;
      --secondary: #7209b7;
      --accent: #4895ef;
      --success: #4cc9f0;
      --warning: #f72585;
      --light: #f8f9fa;
      --dark: #212529;
      --gray: #6c757d;
      --border-radius: 12px;
      --shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #e3e8f0 100%);
      color: var(--dark);
      line-height: 1.6;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      margin-bottom: 40px;
      padding: 30px;
      background: white;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 15px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .description {
      font-size: 1.2rem;
      color: var(--gray);
      max-width: 800px;
      margin: 0 auto;
    }

    .main-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }

    @media (max-width: 900px) {
      .main-content {
        grid-template-columns: 1fr;
      }
    }

    .card {
      background: white;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      padding: 30px;
      transition: var(--transition);
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

    .card-title {
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .upload-area {
      border: 2px dashed var(--accent);
      border-radius: var(--border-radius);
      padding: 40px 20px;
      text-align: center;
      margin-bottom: 25px;
      cursor: pointer;
      transition: var(--transition);
    }

    .upload-area:hover {
      background-color: rgba(72, 149, 239, 0.05);
    }

    .upload-icon {
      font-size: 3.5rem;
      color: var(--accent);
      margin-bottom: 15px;
    }

    .file-input {
      display: none;
    }

    .btn {
      display: inline-block;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      padding: 14px 28px;
      border: none;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(67, 97, 238, 0.4);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn i {
      margin-right: 8px;
    }

    .file-info {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: var(--border-radius);
      margin-top: 20px;
    }

    .file-info h3 {
      margin-bottom: 10px;
      color: var(--primary);
    }

    .file-details {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      color: var(--gray);
    }

    .result-container {
      margin-top: 20px;
    }

    .result-content {
      background-color: #f8f9fa;
      padding: 20px;
      border-radius: var(--border-radius);
      max-height: 300px;
      overflow-y: auto;
      white-space: pre-wrap;
      line-height: 1.8;
    }

    .api-section {
      margin-top: 30px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--primary);
    }

    .form-group input, .form-group textarea {
      width: 100%;
      padding: 14px;
      border: 1px solid #ddd;
      border-radius: var(--border-radius);
      font-size: 1rem;
      transition: var(--transition);
    }

    .form-group input:focus, .form-group textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(72, 149, 239, 0.2);
    }

    .form-group textarea {
      min-height: 120px;
      resize: vertical;
    }

    .loading {
      display: none;
      text-align: center;
      margin: 20px 0;
    }

    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-left-color: var(--primary);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 1s linear infinite;
      margin: 0 auto 10px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .status {
      padding: 12px;
      border-radius: var(--border-radius);
      text-align: center;
      font-weight: 500;
      margin-top: 15px;
      display: none;
    }

    .status.success {
      background-color: rgba(76, 201, 240, 0.2);
      color: var(--success);
      display: block;
    }

    .status.error {
      background-color: rgba(247, 37, 133, 0.2);
      color: var(--warning);
      display: block;
    }

    .chat-container {
      margin-top: 30px;
      border-top: 1px solid #eee;
      padding-top: 20px;
    }

    .chat-messages {
      height: 300px;
      overflow-y: auto;
      padding: 15px;
      background: #f8f9fa;
      border-radius: var(--border-radius);
      margin-bottom: 15px;
    }

    .message {
      margin-bottom: 15px;
      padding: 12px 16px;
      border-radius: 18px;
      max-width: 80%;
    }

    .message.user {
      background: var(--primary);
      color: white;
      margin-left: auto;
    }

    .message.ai {
      background: #e9ecef;
      color: var(--dark);
    }

    .chat-input {
      display: flex;
      gap: 10px;
    }

    .chat-input input {
      flex: 1;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 24px;
      outline: none;
    }

    .chat-input button {
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      cursor: pointer;
    }

    .tab-container {
      margin-bottom: 20px;
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid #ddd;
    }

    .tab {
      padding: 12px 24px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: var(--transition);
    }

    .tab.active {
      border-bottom: 3px solid var(--primary);
      color: var(--primary);
      font-weight: 600;
    }

    .tab-content {
      display: none;
      padding: 20px 0;
    }

    .tab-content.active {
      display: block;
    }

    .analysis-result {
      background: #f8f9fa;
      padding: 20px;
      border-radius: var(--border-radius);
      margin-top: 20px;
    }

    .analysis-item {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .analysis-item:last-child {
      border-bottom: none;
    }

    .match-score {
      font-size: 2rem;
      font-weight: bold;
      text-align: center;
      margin: 20px 0;
      color: var(--primary);
    }

    footer {
      text-align: center;
      margin-top: 60px;
      padding: 30px;
      color: var(--gray);
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>AI简历分析系统</h1>
    <p class="description">基于AI技术的简历解析、分析和匹配工具，帮助HR高效筛选候选人</p>
  </header>

  <div class="tab-container">
    <div class="tabs">
      <div class="tab active" data-tab="upload">简历上传</div>
      <div class="tab" data-tab="analysis">智能分析</div>
      <div class="tab" data-tab="match">岗位匹配</div>
      <div class="tab" data-tab="chat">简历问答</div>
    </div>

    <div class="tab-content active" id="upload-tab">
      <div class="main-content">
        <div class="card">
          <h2 class="card-title"><i class="fas fa-file-upload"></i> 简历上传</h2>

          <div class="upload-area" id="resume-upload">
            <div class="upload-icon">
              <i class="fas fa-file-pdf"></i>
            </div>
            <p>点击选择或拖放简历文件</p>
            <p class="small">支持PDF、Word文档格式</p>
            <input type="file" id="resume-file" class="file-input" accept=".pdf,.docx,.doc">
          </div>

          <button class="btn" id="upload-btn"><i class="fas fa-cloud-upload-alt"></i> 上传并解析</button>

          <div class="file-info">
            <h3>文件信息</h3>
            <p id="file-name">未选择文件</p>
            <div class="file-details">
              <span id="file-type">类型: -</span>
              <span id="file-size">大小: -</span>
            </div>
          </div>
        </div>

        <div class="card">
          <h2 class="card-title"><i class="fas fa-file-alt"></i> 解析结果</h2>

          <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>正在解析简历，请稍候...</p>
          </div>

          <div class="result-content" id="result-content">
            简历解析结果将显示在这里...
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" id="analysis-tab">
      <div class="card">
        <h2 class="card-title"><i class="fas fa-chart-line"></i> 简历分析</h2>

        <div class="analysis-result" id="analysis-result">
          <p>请先上传并解析简历</p>
        </div>

        <button class="btn" id="analyze-btn"><i class="fas fa-magic"></i> 生成分析报告</button>
      </div>
    </div>

    <div class="tab-content" id="match-tab">
      <div class="card">
        <h2 class="card-title"><i class="fas fa-balance-scale"></i> 岗位匹配</h2>

        <div class="form-group">
          <label for="job-description">岗位描述 (JD)</label>
          <textarea id="job-description" placeholder="请输入岗位描述和要求..."></textarea>
        </div>

        <button class="btn" id="match-btn"><i class="fas fa-percentage"></i> 计算匹配度</button>

        <div class="match-score" id="match-score">
          -%
        </div>

        <div class="analysis-result" id="match-result">
          <p>匹配分析结果将显示在这里</p>
        </div>
      </div>
    </div>

    <div class="tab-content" id="chat-tab">
      <div class="card">
        <h2 class="card-title"><i class="fas fa-comments"></i> 简历问答</h2>

        <div class="chat-container">
          <div class="chat-messages" id="chat-messages">
            <div class="message ai">
              您好！我可以帮助您分析这份简历。请问您想了解什么信息？
            </div>
          </div>

          <div class="chat-input">
            <input type="text" id="chat-input" placeholder="输入您的问题...">
            <button id="send-btn"><i class="fas fa-paper-plane"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <p>© 2023 AI简历分析系统 | MVP版本 | 基于DeepSeek API</p>
  </footer>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 选项卡功能
    const tabs = document.querySelectorAll('.tab');
    const tabContents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const tabId = tab.getAttribute('data-tab');

        // 更新选项卡状态
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');

        // 更新内容显示
        tabContents.forEach(content => {
          content.classList.remove('active');
          if (content.id === `${tabId}-tab`) {
            content.classList.add('active');
          }
        });
      });
    });

    // 文件上传处理
    const uploadArea = document.getElementById('resume-upload');
    const fileInput = document.getElementById('resume-file');

    uploadArea.addEventListener('click', () => {
      fileInput.click();
    });

    // 拖放功能
    uploadArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      uploadArea.style.backgroundColor = 'rgba(72, 149, 239, 0.1)';
    });

    uploadArea.addEventListener('dragleave', () => {
      uploadArea.style.backgroundColor = '';
    });

    uploadArea.addEventListener('drop', (e) => {
      e.preventDefault();
      uploadArea.style.backgroundColor = '';

      if (e.dataTransfer.files.length) {
        handleFileSelect(e.dataTransfer.files[0]);
      }
    });

    fileInput.addEventListener('change', () => {
      if (fileInput.files.length) {
        handleFileSelect(fileInput.files[0]);
      }
    });

    function handleFileSelect(file) {
      const fileName = file.name;
      const fileType = file.type || fileName.split('.').pop();
      const fileSize = formatFileSize(file.size);

      updateFileInfo(fileName, fileType, fileSize);
    }

    function updateFileInfo(name, type, size) {
      document.getElementById('file-name').textContent = name;
      document.getElementById('file-type').textContent = `类型: ${type}`;
      document.getElementById('file-size').textContent = `大小: ${size}`;
    }

    function formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 上传按钮
    document.getElementById('upload-btn').addEventListener('click', async () => {
      const file = fileInput.files[0];

      if (!file) {
        showStatus('请先选择文件', 'error');
        return;
      }

      // 显示加载状态
      document.getElementById('loading').style.display = 'block';

      try {
        // 模拟API请求
        const formData = new FormData();
        formData.append('resume', file);

        // 这里应该是实际的API调用
        // const response = await fetch('/api/upload', {
        //     method: 'POST',
        //     body: formData
        // });
        // const data = await response.json();

        // 模拟响应
        await new Promise(resolve => setTimeout(resolve, 2000));
        const data = {
          success: true,
          data: {
            name: "张三",
            email: "zhangsan@email.com",
            phone: "13800138000",
            education: [
              { degree: "硕士", school: "清华大学", major: "计算机科学", period: "2018-2021" },
              { degree: "学士", school: "北京大学", major: "软件工程", period: "2014-2018" }
            ],
            experience: [
              { company: "ABC科技", position: "高级软件工程师", period: "2021-至今", description: "负责后端系统开发与优化" },
              { company: "XYZ互联网", position: "软件工程师", period: "2019-2021", description: "参与前端开发与系统维护" }
            ],
            skills: ["JavaScript", "Python", "Node.js", "React", "Vue", "MongoDB"]
          }
        };

        if (data.success) {
          displayResumeData(data.data);
          showStatus('简历解析成功', 'success');
        } else {
          throw new Error('解析失败');
        }
      } catch (error) {
        showStatus('解析失败: ' + error.message, 'error');
      } finally {
        document.getElementById('loading').style.display = 'none';
      }
    });

    function displayResumeData(data) {
      let content = `姓名: ${data.name}\n`;
      content += `邮箱: ${data.email}\n`;
      content += `电话: ${data.phone}\n\n`;

      content += `教育经历:\n`;
      data.education.forEach(edu => {
        content += `- ${edu.degree} | ${edu.school} | ${edu.major} | ${edu.period}\n`;
      });

      content += `\n工作经历:\n`;
      data.experience.forEach(exp => {
        content += `- ${exp.position} | ${exp.company} | ${exp.period}\n`;
        content += `  ${exp.description}\n`;
      });

      content += `\n技能:\n`;
      content += data.skills.join(', ');

      document.getElementById('result-content').textContent = content;
    }

    // 分析按钮
    document.getElementById('analyze-btn').addEventListener('click', async () => {
      const resumeData = document.getElementById('result-content').textContent;

      if (resumeData === '简历解析结果将显示在这里...') {
        showStatus('请先上传并解析简历', 'error');
        return;
      }

      try {
        // 模拟API请求
        // const response = await fetch('/api/analyze', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify({ resume: resumeData })
        // });
        // const data = await response.json();

        // 模拟响应
        await new Promise(resolve => setTimeout(resolve, 1500));
        const data = {
          success: true,
          analysis: {
            completeness: 85,
            strengths: ["教育背景优秀", "技术栈丰富", "有大厂工作经验"],
            weaknesses: ["项目描述不够详细", "缺乏量化成果", "技能熟练度未标明"],
            suggestions: [
              "增加项目成果的量化数据",
              "注明各技能熟练程度",
              "补充个人项目或开源贡献"
            ]
          }
        };

        if (data.success) {
          displayAnalysisResult(data.analysis);
          showStatus('分析完成', 'success');
        } else {
          throw new Error('分析失败');
        }
      } catch (error) {
        showStatus('分析失败: ' + error.message, 'error');
      }
    });

    function displayAnalysisResult(analysis) {
      let html = `
                    <div class="analysis-item">
                        <h3>简历完整度: ${analysis.completeness}%</h3>
                    </div>
                    <div class="analysis-item">
                        <h3>优势</h3>
                        <ul>
                `;

      analysis.strengths.forEach(strength => {
        html += `<li>${strength}</li>`;
      });

      html += `
                        </ul>
                    </div>
                    <div class="analysis-item">
                        <h3>不足</h3>
                        <ul>
                `;

      analysis.weaknesses.forEach(weakness => {
        html += `<li>${weakness}</li>`;
      });

      html += `
                        </ul>
                    </div>
                    <div class="analysis-item">
                        <h3>改进建议</h3>
                        <ul>
                `;

      analysis.suggestions.forEach(suggestion => {
        html += `<li>${suggestion}</li>`;
      });

      html += `
                        </ul>
                    </div>
                `;

      document.getElementById('analysis-result').innerHTML = html;
    }

    // 匹配按钮
    document.getElementById('match-btn').addEventListener('click', async () => {
      const jd = document.getElementById('job-description').value;
      const resumeData = document.getElementById('result-content').textContent;

      if (!jd) {
        showStatus('请输入岗位描述', 'error');
        return;
      }

      if (resumeData === '简历解析结果将显示在这里...') {
        showStatus('请先上传并解析简历', 'error');
        return;
      }

      try {
        // 模拟API请求
        // const response = await fetch('/api/match', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify({ resume: resumeData, jd: jd })
        // });
        // const data = await response.json();

        // 模拟响应
        await new Promise(resolve => setTimeout(resolve, 2000));
        const data = {
          success: true,
          match: {
            score: 78,
            strengths: ["匹配所需技术栈", "教育背景符合要求", "有相关行业经验"],
            gaps: ["缺乏管理经验", "项目规模不足", "未提及相关认证"],
            suggestions: [
              "强调与岗位相关的项目经验",
              "补充项目管理相关经验",
              "获取相关技术认证"
            ]
          }
        };

        if (data.success) {
          displayMatchResult(data.match);
          showStatus('匹配计算完成', 'success');
        } else {
          throw new Error('匹配计算失败');
        }
      } catch (error) {
        showStatus('匹配计算失败: ' + error.message, 'error');
      }
    });

    function displayMatchResult(match) {
      document.getElementById('match-score').textContent = `${match.score}%`;

      let html = `
                    <div class="analysis-item">
                        <h3>匹配优势</h3>
                        <ul>
                `;

      match.strengths.forEach(strength => {
        html += `<li>${strength}</li>`;
      });

      html += `
                        </ul>
                    </div>
                    <div class="analysis-item">
                        <h3>差距分析</h3>
                        <ul>
                `;

      match.gaps.forEach(gap => {
        html += `<li>${gap}</li>`;
      });

      html += `
                        </ul>
                    </div>
                    <div class="analysis-item">
                        <h3>改进建议</h3>
                        <ul>
                `;

      match.suggestions.forEach(suggestion => {
        html += `<li>${suggestion}</li>`;
      });

      html += `
                        </ul>
                    </div>
                `;

      document.getElementById('match-result').innerHTML = html;
    }

    // 聊天功能
    document.getElementById('send-btn').addEventListener('click', sendMessage);
    document.getElementById('chat-input').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });

    async function sendMessage() {
      const input = document.getElementById('chat-input');
      const message = input.value.trim();

      if (!message) return;

      // 添加用户消息
      addMessage(message, 'user');
      input.value = '';

      try {
        // 模拟API请求
        // const response = await fetch('/api/chat', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: JSON.stringify({ message: message })
        // });
        // const data = await response.json();

        // 模拟响应
        await new Promise(resolve => setTimeout(resolve, 1000));

        // 根据问题生成回答
        let responseText = "这是基于您简历信息的回答。";

        if (message.includes("教育") || message.includes("学校") || message.includes("学历")) {
          responseText = "候选人拥有硕士学历，毕业于清华大学计算机科学专业，本科就读于北京大学软件工程专业。";
        } else if (message.includes("经验") || message.includes("工作") || message.includes("经历")) {
          responseText = "候选人有4年工作经验，现任ABC科技高级软件工程师，曾任职于XYZ互联网公司。";
        } else if (message.includes("技能") || message.includes("技术") || message.includes("能力")) {
          responseText = "候选人掌握JavaScript、Python、Node.js、React、Vue、MongoDB等技术栈。";
        } else if (message.includes("项目") || message.includes("成果")) {
          responseText = "简历中项目描述较为简略，建议补充更多量化成果和详细描述。";
        }

        // 添加AI回复
        addMessage(responseText, 'ai');
      } catch (error) {
        addMessage("抱歉，我暂时无法回答这个问题。请稍后再试。", 'ai');
      }
    }

    function addMessage(text, sender) {
      const messagesContainer = document.getElementById('chat-messages');
      const messageDiv = document.createElement('div');
      messageDiv.classList.add('message', sender);
      messageDiv.textContent = text;
      messagesContainer.appendChild(messageDiv);
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }

    function showStatus(message, type) {
      // 创建状态消息元素
      const statusElement = document.createElement('div');
      statusElement.textContent = message;
      statusElement.className = 'status ' + type;
      statusElement.style.position = 'fixed';
      statusElement.style.top = '20px';
      statusElement.style.right = '20px';
      statusElement.style.left = 'auto';
      statusElement.style.width = '300px';
      statusElement.style.zIndex = '1000';

      document.body.appendChild(statusElement);

      // 5秒后隐藏状态消息
      setTimeout(() => {
        statusElement.remove();
      }, 5000);
    }
  });
</script>
</body>
</html>